<template>
  <a-drawer
    v-model:visible="vdata.visible"
    width="35%"
    :title="vdata.isAdd ? '新增Banner' : '修改Banner'"
    :confirm-loading="vdata.btnLoading"
    :maskClosable="false"
    @ok="handleOkFunc"
  >
    <a-form
      ref="formRef"
      :model="vdata.saveObject"
      :label-col="{ span: 5 }"
      labelAlign="left"
      :wrapper-col="{ span: 19 }"
      :rules="vdata.rules"
    >
      <!-- <a-form-item label="小程序" name="appId" :wrapper-col="{ span: 9 }">
        <a-select v-model:value="vdata.saveObject['appId']" placeholder="请选择小程序" :options="vdata.appList" />
      </a-form-item> -->
      <a-form-item label="机构号" name="agentNo" :wrapper-col="{ span: 9 }">
        <GzTreeSelect v-model:value="vdata.saveObject['agentNo']" :showLevel="3" :placeholder="'请选择机构号'" :isNeedDefault="false" />
      </a-form-item>
      <a-form-item label="banner图片" name="url" :wrapper-col="{ span: 9 }">
        <GzUpload v-model:src="vdata.saveObject['url']" bizType="WeChat" />
      </a-form-item>
      <a-form-item label="banner标题" name="swiperName" :wrapper-col="{ span: 9 }">
        <a-input v-model:value="vdata.saveObject['swiperName']" placeholder="请输入banner标题" />
      </a-form-item>
      <a-form-item label="链接类型" name="linkType" :wrapper-col="{ span: 20 }">
        <a-radio-group v-model:value="vdata.saveObject['linkType']">
          <a-radio :value="'0'">不做链接</a-radio>
          <a-radio :value="'1'">活动详情</a-radio>
          <a-radio :value="'2'">本小程序页面</a-radio>
          <a-radio :value="'3'">外部网页链接</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item v-if="vdata.saveObject.linkType == 1" label="活动id" name="content" :wrapper-col="{ span: 9 }">
        <a-input v-model:value="vdata.saveObject['content']" placeholder="请输入活动id" />
      </a-form-item>
      <a-form-item v-if="vdata.saveObject.linkType == 2" label="小程序路径" name="content" :wrapper-col="{ span: 9 }">
        <a-input v-model:value="vdata.saveObject['content']" placeholder="请输入小程序路径" />
      </a-form-item>
      <a-form-item v-if="vdata.saveObject.linkType == 3" label="网页链接" name="content" :wrapper-col="{ span: 9 }">
        <a-input v-model:value="vdata.saveObject['content']" placeholder="请输入网页链接" />
      </a-form-item>

      <a-form-item label="顺序" name="sort" :wrapper-col="{ span: 9 }">
        <a-input-number v-model:value="vdata.saveObject['sort']" placeholder="请输入顺序" style="width: 100%;" :controls="false" />
      </a-form-item>

      <a-form-item label="开始时间" name="startTime" :wrapper-col="{ span: 9 }">
        <a-date-picker
          v-model:value="vdata.saveObject['startTime']"
          value-format="YYYY-MM-DD HH:mm:ss"
          show-time
          :disabled-date="(current) => current && current < dayjs().endOf('day')"
          style="width: 100%;"
          @change="startTimeChange"
        />
      </a-form-item>

      <a-form-item label="结束时间类型" name="endType" :wrapper-col="{ span: 20 }">
        <a-radio-group v-model:value="vdata.saveObject['endType']">
          <a-radio :value="0">无期限</a-radio>
          <a-radio :value="1">定时</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item v-if="vdata.saveObject.endType == 1" label="结束时间" name="endTime" :wrapper-col="{ span: 9 }">
        <a-date-picker
          v-model:value="vdata.saveObject['endTime']"
          value-format="YYYY-MM-DD HH:mm:ss"
          show-time
          :disabled-date="(current) => current && current < dayjs().endOf('day')"
          style="width: 100%;"
          @change="endTimeChange"
        />
      </a-form-item>
    </a-form>

    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" style="margin-right:8px" @click="onClose">
        <close-outlined />
        取消
      </a-button>
      <a-button type="primary" :loading="vdata.btnLoading" @click="handleOkFunc">
        <check-outlined />
        保存
      </a-button>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import dayjs from 'dayjs'
import { $addBanner,$bannerInfo,$updateBanner } from '@/api/proxy/programManage/liteBanner/index'
const props = defineProps(['appId'])

const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

const emit = defineEmits(['callback'])

const formRef = ref()
const vdata: any = reactive({
  btnLoading: false, // 显示确定按钮loading图标
  isAdd: true, // 新增 or 修改页面标识
  visible: false, // 是否显示弹层/抽屉
  saveObject: {}, // 数据对象
  recordId: null, // 更新对象ID
  rules: {
    // appId: [{ required: true, message: '请选择小程序', trigger: 'blur' }],
    agentNo: [{ required: true, message: '请选择机构号', trigger: 'blur' }],
    url: [{ required: true, message: '请上传banner图片', trigger: 'blur' }], 
    swiperName: [{ required: true, message: '请输入banner标题', trigger: 'blur' }],
    linkType: [{ required: true, message: '请选择链接类型', trigger: 'blur' }],
    content: [{
      required: true, trigger: 'blur', validator: () => {
        const lt = vdata.saveObject.linkType
        const lp = vdata.saveObject.content
        return !lp ? (lt === 1 ? Promise.reject('请输入活动id') : (lt === 2 ? Promise.reject('请输入小程序路径') : Promise.reject('请输入网页链接'))) : Promise.resolve()
      }
    }],
    sort: [{ required: true, message: '请输入顺序', trigger: 'blur' }],
    startTime: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
    endType: [{ required: true, message: '结束时间类型', trigger: 'blur' }],
    endTime: [{ required: true, message: '请选择结束时间', trigger: 'blur' }]
  }
})

const endTimeChange = (date,dateString) =>{
  vdata.saveObject['endTime'] = dateString
}
const startTimeChange = (date,dateString) =>{
  vdata.saveObject['startTime'] = dateString
}

// 点击【确认】按钮事件
function handleOkFunc() {
  formRef.value.validate().then(() => {
    vdata.btnLoading = true
    if (vdata.isAdd) {

      $addBanner({...vdata.saveObject,appId:appId.value}).then(response => {
        onClose()
        $infoBox.message.success('新增成功')
        emit('callback')
      }).finally(() => {
        vdata.btnLoading = false
      })
    } else {
      $updateBanner(vdata.saveObject).then(response => {
        onClose()
        $infoBox.message.success('修改成功')
        emit('callback')
      }).finally(() => {
        vdata.btnLoading = false
      })
    }
  })
}

function onClose() {
  vdata.visible = false
}

const appId = ref('')

// 弹层打开事件
function show(recordId,appList) {
  // console.log('props.appId',props.appId) 
  // vdata.saveObject.appId = props.appId
  appId.value = props.appId
  vdata.isAdd = !recordId
  vdata.appList = appList
  // 数据清空
  vdata.saveObject = {
    linkType: '0',
    endType: '0'
  }

if(!vdata.isAdd){
  vdata.btnLoading = true
    $bannerInfo({bannerId:recordId}).then(response => {
      vdata.saveObject=response
    }).finally(() => {
      vdata.btnLoading = false
    })
}
  vdata.visible = true
}
defineExpose({ show })
</script>
